<script>
import {
  getArticleDetail,
  getArticleCommentList,
  AddUpvote,
  CancelUpvote,
  CheckUpVote,
  getAddCollection, getCancelCollection, getCheckCollection
} from "@/api/homePage";
	import Config from "@/config";
export default {
  name: "index",
  data() {
    return {
		imgUrl: Config.imgUrl,
      articleId: "",
      articleInfo: {},
      jumpText: "立即去购票",
      loading: true,
      type: 0,
      comments: [],
      commentInput: '',
      commentImages: [],
      dotShow: false, // 是否已点赞
      isCollected: false // 是否收藏
    }
  },
  onLoad(options) {
    // 从路由参数获取文章ID
    if (options && options.id) {
      this.articleId = options.id;
      this.fetchArticleDetail();
      this.type = parseInt(options.type)
      this.checkUpvoteStatus(); // 页面加载时检查点赞状态
      this.checkCollectionStatus(); // 页面加载时检查收藏状态
    } else {
      // 没有ID参数时，使用默认数据（已在data中定义）
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  },
  methods: {
    // 检查是否点赞
    checkUpvoteStatus() {
      console.log('点赞')
      CheckUpVote({ Id: this.articleId }).then(res => {
        console.log(res.Data)
        this.dotShow = res.Data;
      });
    },
    // 检查收藏状态
     checkCollectionStatus() {
          getCheckCollection({
          CollectionType: 2,
          Id: this.articleId
        }).then((res)=>{
           this.isCollected = res.Data;
         })
    },
    // 获取文章详情
    fetchArticleDetail() {
      getArticleDetail({
        Id: this.articleId
      }).then(res =>{
        const data = res.Data
        this.articleInfo = {
          title: data.Title,
          img: data.CoverImg,
          author: data.Author,
          viewsNum: data.ViewsNum,
          updateDateTime: data.UpdateDateTime,
          abstract: data.Abstract,
          content: data.ChineseSubstance,
        }
        uni.setNavigationBarTitle({ title: data.Title })
        this.loading = false;
        // 文章详情加载后加载评论
        this.fetchComments();
      })
    },
    // 获取评论列表
    fetchComments() {
      getArticleCommentList({
        ArticleId: this.articleId,
        Index: 1,
        Size: 10
      }).then(res => {
        // 假设返回的数据结构为 res.Data 为数组
        this.comments = Array.isArray(res.Data) ? res.Data : [];
      })
    },

    jumpComments(){
      uni.navigateTo({
        url: "/pages/article/comments?id=" + this.articleId
      })
    },

    // 跳转到指定链接
    jumpToLink() {
      if(this.type){
        uni.navigateTo({
          url: "/mall_subpages/merchants/detail?id=" + this.articleId + "&type=" + this.type
        })
      }

    },

    // 分享文章
    shareArticle() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    },

    // 切换收藏状态
    async toggleCollect() {
      try {
        if (this.isCollected) {
          // 取消收藏
          const res = await getCancelCollection({
            CollectionType: 2, // 商家收藏类型
            Id:  this.articleId // 商家ID
          });
          this.isCollected = false;
          uni.showToast({
            title: '已取消收藏',
            icon: 'none',
            duration: 2000
          });
        } else {
          // 添加收藏
          const res = await getAddCollection({
            CollectionType: 2, // 商家收藏类型
            Id: this.articleId // 商家ID
          });
          this.isCollected = true;
          uni.showToast({
            title: '收藏成功',
            icon: 'success',
            duration: 2000
          });
        }
      } catch (error) {
        console.error('操作收藏失败:', error);
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    // 点赞/取消点赞
    dot() {
      if (this.dotShow) {
        CancelUpvote({ Id: this.articleId }).then(res => {
          console.log('取消点赞返回：', res);
          this.checkUpvoteStatus();
        }).catch(err => {
          console.error('取消点赞出错:', err);
          uni.showToast({ title: '取消点赞出错', icon: 'none' });
        });
      } else {
        AddUpvote({ Id: this.articleId }).then(res => {
          console.log('点赞返回：', res);
          this.checkUpvoteStatus();
        }).catch(err => {
          console.error('点赞出错:', err);
          uni.showToast({ title: '点赞出错', icon: 'none' });
        });
      }
    }
  }
}
</script>

<template>
  <view class="raiders-container">
    <!-- 加载中状态 -->
    <view class="loading-wrapper" v-if="loading">
      <view class="loading-spinner"></view>
      <text>加载中...</text>
    </view>

    <!-- 文章内容 -->
    <view class="article-wrapper" v-else>
      <!-- 封面图 -->
      <view class="cover-section">
        <image class="cover-image" v-if="articleInfo.img" :src="articleInfo.img" mode="aspectFill"></image>
<!--        <view class="share-btn" @click="shareArticle">-->
<!--          <image src="/static/raiders/share-icon.png" mode="aspectFit"></image>-->
<!--        </view>-->
      </view>

      <!-- 文章信息 -->
      <view class="article-info">
        <view class="article-meta">
          <text class="author" v-if="articleInfo.author">{{articleInfo.author}}</text>
          <text class="publish-time" v-if="articleInfo.updateDateTime">{{articleInfo.updateDateTime}}</text>
          <text class="views" v-if="articleInfo.viewsNum">{{articleInfo.viewsNum}} 浏览</text>
          <!-- 添加点赞图标 -->
          <view class="collect-btn" @click="dot">
            <!-- 调试信息 -->
            <image v-if="dotShow" :src="'/static/img/collect1.png?v='+ new Date().getTime()" mode="aspectFit"></image>
            <image v-else :src="'/static/img/collect.png?v='+ new Date().getTime()" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 操作按钮行 -->
        <view class="action-buttons">
          <view class="article-title-container">
            <view class="article-title" v-if="articleInfo.title">{{articleInfo.title}}</view>
          </view>
          
          <view class="buttons-container">
            <!-- 分享按钮 -->
            <view class="share-float">
              <image :src="imgUrl + 'upload/img/ws_static/static/yqimg/share.png'" class="share-float-icon"></image>
              <text class="share-float-text">分享</text>
              <button open-type="share" class="share-open-btn"></button>
            </view>
            
            <!-- 收藏按钮 -->
            <view class="collection" @click="toggleCollect()">
              <image :src="isCollected ? 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530139634.png'
              : 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530083228.png'" class="share-float-icon" mode="aspectFit"></image>
              <text class="share-float-text">{{isCollected ? '已收藏' : '收藏'}}</text>
            </view>
          </view>
        </view>
        
        <view class="article-summary" v-if="articleInfo.abstract">{{articleInfo.abstract}}</view>
      </view>

      <!-- 富文本内容 -->
      <view class="article-content-wrapper">
        <mp-html v-if="articleInfo.content" :content="articleInfo.content" scroll-table lazy-load />
      </view>

      <!-- 用户评论区 -->
     <!-- <view class="comment-section">
        <view class="comment-title">评论区({{comments.length}})</view>
        <view v-for="(item, idx) in comments" :key="idx" class="comment-item">
          <image class="avatar" v-if="item.HeadImg" :src="item.HeadImg" />
          <view class="comment-content">
            <view class="comment-header">
              <text class="nickname" v-if="item.UserName">{{item.UserName}}</text>
              <text class="time" v-if="item.AddTime">{{item.AddTime}}</text>
            </view>
            <view class="text" v-if="item.ContentText">{{item.ContentText}}</view>
          </view>
        </view>
       
        <view class="comment-btn-bar">
          <button class="write-comment-btn" @click="jumpComments">写评论</button>
        </view>
      </view> -->
    </view>
  </view>
</template>

<style scoped lang="scss">
.raiders-container {
  min-height: 100vh;
  background-color: #fff;
}
.share_box{
  display: flex;
}

/* 加载状态 */
.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;

  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 6rpx solid #f0f0f0;
    border-top: 6rpx solid #3a7fe6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 封面区域 */
.cover-section {
  position: relative;
  width: 100%;
  height: 500rpx;

  .cover-image {
    width: 100%;
    height: 100%;
  }

  .back-btn, .share-btn {
    position: absolute;
    top: 80rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .back-btn {
    left: 30rpx;

    image {
      transform: rotate(180deg);
    }
  }

  .share-btn {
    right: 30rpx;
  }
}

/* 文章信息 */
.article-info {
  padding: 30rpx;
  margin-top: -50rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  position: relative;
  z-index: 1;

  .article-meta {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    color: #999;
    align-items: center;

    .author {
      margin-right: 20rpx;
      font-weight: 500;
      color: #666;
    }

    .publish-time {
      margin-right: 20rpx;
    }

    .views {
      flex: 1;
    }

    .collect-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .action-buttons {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .article-title-container {
    flex: 1;
  }

  .article-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 20rpx;
  }

  .buttons-container {
    display: flex;
    align-items: center;
    margin-left: 20rpx;
  }

  .article-summary {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30rpx;
  }

  .btn-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;
  }

  .jump-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    padding: 0 60rpx;
    background: linear-gradient(135deg, #4794FF 0%, #2C6BEA 100%);
    border-radius: 40rpx;

    text {
      font-size: 28rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}

/* 富文本内容 */
.article-content-wrapper {
  padding: 0 30rpx 80rpx;

  /deep/ .article-content {
    font-size: 30rpx;
    line-height: 1.8;
    color: #333;

    h2 {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin: 40rpx 0 20rpx;
    }

    p {
      margin-bottom: 20rpx;
    }

    img {
      width: 100%;
      border-radius: 12rpx;
      margin: 20rpx 0;
    }

    ul, ol {
      padding-left: 40rpx;
      margin: 20rpx 0;

      li {
        margin-bottom: 10rpx;
      }
    }

    strong {
      font-weight: bold;
    }
  }
}

.comment-section {
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 30rpx 0;

  .comment-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .comment-item {
    display: flex;
    margin-bottom: 30rpx;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .comment-content {
      flex: 1;
      .comment-header {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        .nickname {
          font-weight: bold;
          margin-right: 16rpx;
        }
        .time {
          color: #999;
          font-size: 24rpx;
        }
      }
      .text {
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .comment-btn-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 10rpx;
    .write-comment-btn {
      background: linear-gradient(90deg, #3a7fe6, #5895e9);
      color: #fff;
      font-size: 28rpx;
      border-radius: 35rpx;
      padding: 0 40rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-weight: bold;
      border: none;
    }
  }
}

.share-float {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60rpx;
  margin-right: 20rpx;
  position: relative;
}

.collection {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60rpx;
}

.share-float-icon {
  width: 40rpx;
  height: 40rpx;
  display: block;
}

.share-float-text {
  font-size: 22rpx;
  color: #666;
  margin-top: 4rpx;
}

.share-open-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  opacity: 0;
  z-index: 20;
  padding: 0;
  margin: 0;
}
</style>
